<template>
  <div class="my">
    <Header>
      <a
        href="javascript:;"
        slot="logo"
        class="my_qrcode"
        @click="qrcodeClickHandle"
        ><i class="icon-QRcode"></i
      ></a>
      <router-link
        :to="{ name: 'SETING', params: { usid: $store.state.user.userId } }"
        class="my_headerset"
        slot="rightMenu"
      >
        <i class="icon-setting"></i>
      </router-link>
      <span slot="title" class="my_header_title">{{
        $t('lang["' + $route.meta.title + '"]')
      }}</span>
    </Header>
    <div class="my_main">
      <MyPanel></MyPanel>
    </div>
    <Footer></Footer>
    <FooterNav></FooterNav>
    <van-action-sheet
      v-model="isShow"
      :cancel-text="$t('lang.取消')"
      :description="$t('lang.推广二维码')"
      @cancel="onCancel"
      @opened="onOpened"
    >
      <div class="qrcode_main">
        <div class="qrcode_main_content" ref="qrCodeUrl"></div>
        <span class="qrcode_main_tip">{{
          $t("lang.请在安全的环境下拍掇")
        }}</span>
      </div>
    </van-action-sheet>
  </div>
</template>
<script>
import QRCode from "qrcodejs2";
export default {
  name: "My",
  components: {
    Header: () =>
      import(/* webpackChunkName: "header" */ "../components/header"),
    Footer: () =>
      import(/* webpackChunkName: "footer" */ "../components/footer"),
    FooterNav: () =>
      import(/* webpackChunkName: "footerNav" */ "../components/footerNav"),
    MyPanel: () =>
      import(/* webpackChunkName: "myMain" */ "../components/my/myMain"),
  },
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    qrcodeClickHandle() {
      this.isShow = true;
    },
    onCancel() {},
    onOpened() {
      this.creatQrCode();
    },
    creatQrCode() {
      this.$refs.qrCodeUrl.innerHTML = "";
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: location.href,
        width: 200,
        height: 200,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.my {
  padding: 0;
  margin: 0;
  .my_qrcode {
    font-size: 26 / @base;
    padding: 10 / @base 5 / @base 10 / @base 15 / @base;
    display: block;
    text-align: left;
  }
  .my_headerset {
    font-size: 24 / @base;
    padding: 10 / @base 15 / @base 10 / @base 5 / @base;
    display: block;
    text-align: right;
  }
  .my_header_title {
    line-height: 45 / @base;
  }
  .my_main {
    margin: 45 / @base 0 0;
  }
  .qrcode_main {
    text-align: center;
    padding: 10 / @base;
    .qrcode_main_content {
      padding: 10 / @base;
    }
    .qrcode_main_tip {
      color: #ccc;
    }
    img {
      margin: 0 auto;
    }
  }
}
</style>
